<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <script type="text/html" id="priceTableBar">
            <a class="layui-btn layui-btn-danger layui-btn-xs data-count-delete" lay-event="delete">删除</a>
        </script>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>赛事套餐制定</legend>
        </fieldset>

        <form class="layui-form" action="">
            <input id="price_info_id" type="hidden" name="belongEvevtId"/>
            <div class="layui-form-item">
                <label class="layui-form-label">套餐名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" lay-reqtext="套餐名称是必填项，岂能为空？" placeholder="请输入"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">套餐定价</label>
                <div class="layui-input-block">
                    <input type="number" name="price" lay-verify="required" lay-reqtext="套餐定价是必填项，岂能为空？"
                           placeholder="套餐定价" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">添加</button>
                </div>
            </div>
        </form>
        <table class="layui-hide" id="priceTable" lay-filter="priceTableFilter"></table>
    </div>
</div>
<script>
    layui.use(['form', 'table', 'laydate'], function () {

        let form = layui.form,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$;
        let loadIndex = layer.load(1, {
            shade: [0.5, '#fff']
        });
        setTimeout(function () {
            table.render({
                elem: '#priceTable',
                url: '/event/price/list?eventId=' + $("#price_info_id").val(),
                method: "post",
                dataType: "json",
                contentType: "application/json",
                defaultToolbar: [],
                request: {
                },
                cols: [[
                    {type: "checkbox", minWidth: 30},
                    {field: 'name', title: '套餐名称', minWidth: 100},
                    {field: 'price', title: '套餐定价', minWidth: 100,sort:true},
                    {title: '操作', toolbar: '#priceTableBar', align: "center", minWidth: 160,},
                ]],
                done: function (res, curr, count) {
                    layer.close(loadIndex);
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    // console.log(res);

                    //得到当前页码
                    // console.log(curr);

                    //得到数据总量
                    // console.log(count);
                },
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "data": res.data //解析数据列表
                    };
                },
                initSort: {
                    field: 'price' //排序字段，对应 cols 设定的各字段名
                    , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                },
                limits: [10, 20, 50, 100],
                limit: 10,
                page: false,
                skin: 'line'
            });
        }, 1000)
        table.on('tool(priceTableFilter)', function (obj) {
            if (obj.event === 'delete') {  // 监听删除操作
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: "/event/price/delete/byId?priceId=" + obj.data.id,
                        method: "post",
                        contentType: "application/json",
                        dataType: "json",
                        success: function (res) {
                            if (res.status === 1) {
                                layer.msg('成功', {
                                    icon: 1,
                                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                });
                            } else {
                                layer.msg('失败', {
                                    icon: 2,
                                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                });
                            }
                            form.render();
                        }
                    })
                })
            }
        })

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            if (undefined === data.field.status) {
                data.field.status = 0
            }
            console.log(data.field)
            $.ajax({
                url: "/event/price/add",
                method: "post",
                contentType: "application/json",
                dataType: "json",
                async: false,
                data: JSON.stringify(data.field),
                success: function (res) {
                    if (res.status === 1) {
                        layer.alert("成功", {icon: 1});
                        table.reload('priceTable');
                    } else {
                        layer.alert("失败", {icon: 2});
                    }
                }
            })
            return true;
        });
    })
</script>